<template>
	<view>
		<!-- 话题详情模糊背景 -->
		<topicInfo :item="topic"></topicInfo>
		
		<!-- tab 切换 -->
		<swiperTabHead 
		:tabBars="tabBars" 
		:tabIndex="tabIndex" 
		@tabTap="tabTap" 
		swiperTabStyle="border-bottom: 0" 
		swiperTabListStyle="width: 50%"
		>
		</swiperTabHead>
		
		<!-- 列表 -->
		<view class="topic-detail-list">
			<block v-for="(item, index) in tabList" :key="index">
				<template v-if="tabIndex == index">
					<!-- 列表 -->
					<block v-for="(itemSub, indexSub) in item.list" :key="indexSub">
						<commonList :item="itemSub" :index="indexSub"></commonList>
					</block>
					<!-- 上拉加载 -->
					<loadMore :loadMoreText="item.loadMoreText"></loadMore>
				</template>
			</block>
		</view>
		
	</view>
</template>

<script>
	import topicInfo from '../../components/news/topic-info.vue'
	import swiperTabHead from '../../components/index/swiper-tab-head.vue'
	import commonList from '../../components/common/common-list.vue'
	import loadMore from '../../components/common/load-more.vue'
	import noThing from '../../components/common/no-thing.vue'
	export default {
		components: {
			topicInfo,
			swiperTabHead,
			commonList,
			loadMore,
			noThing
		},
		data() {
			return {
				topic: {
					titlepic: '../../static/demo/topicpic/13.jpeg',
					title: '忆往事寄余生',
					desc: '我是描述',
					totalNum: 50,
					todayNum: 20
				},
				tabBars: [
					{
				    name: '默认',
				    id: 'moren'
					}, {
						name: '最新',
						id: 'zuixin'
					}
				],
				tabIndex: 0,
				tabList: [
					{
						loadMoreText: '上拉加载更多',
						list: [
							// 图文列表
							{
								userpic: '../../static/demo/userpic/12.jpg',
								username: '昵称',
								sex: 0, // 0：男， 1： 女
								age: 25,
								isguanzhu: false,
								title: '我是主标题',
								titlepic: '../../static/demo/datapic/13.jpg',
								video: false,
								share: false,
								path: '深圳 龙岗',
								commetNum: 22,
								shareNum: 99,
								zanNum: 33
							},
							// 视频列表
							{
								userpic: '../../static/demo/userpic/12.jpg',
								username: '昵称',
								sex: 1, // 0：男， 1： 女
								age: 25,
								isguanzhu: false,
								title: '我是视频主标题',
								titlepic: '../../static/demo/datapic/13.jpg',
								video: {
									lonkNum: 2212,
									long: '2:22'
								},
								share: false,
								path: '深圳 龙岗',
								commetNum: 22,
								shareNum: 99,
								zanNum: 33
							},
							// 分享列表
							{
								userpic: '../../static/demo/userpic/12.jpg',
								username: '昵称',
								sex: 1, // 0：男， 1： 女
								age: 20,
								isguanzhu: false,
								title: '我是分享主标题',
								titlepic: '',
								video: false,
								share: {
									shareTile: '分享内容标题',
									shareTitlePic: '../../static/demo/datapic/19.jpg'
								},
								path: '深圳 龙岗',
								commetNum: 22,
								shareNum: 99,
								zanNum: 33
							}
						]
					},
					{
						loadMoreText: '上拉加载更多',
						list: [
							// 图文列表
							{
								userpic: '../../static/demo/userpic/12.jpg',
								username: '昵称',
								sex: 0, // 0：男， 1： 女
								age: 25,
								isguanzhu: false,
								title: '我是主标题',
								titlepic: '../../static/demo/datapic/13.jpg',
								video: false,
								share: false,
								path: '深圳 龙岗',
								commetNum: 22,
								shareNum: 99,
								zanNum: 33
							},
							// 视频列表
							{
								userpic: '../../static/demo/userpic/12.jpg',
								username: '昵称',
								sex: 1, // 0：男， 1： 女
								age: 25,
								isguanzhu: false,
								title: '我是视频主标题',
								titlepic: '../../static/demo/datapic/13.jpg',
								video: {
									lonkNum: 2212,
									long: '2:22'
								},
								share: false,
								path: '深圳 龙岗',
								commetNum: 22,
								shareNum: 99,
								zanNum: 33
							}
						]
					}
				]
			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getRefresh()
		},
		// 页面上拉触底事件的处理函数
		onReachBottom() {
			this.loadMore(this.tabIndex)
		},
		methods: {
			// 滑动事件
			tabTap(index){
				this.tabIndex = index
			},
			getRefresh() {
				let arr = [
					// 视频列表
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '昵称',
						sex: 1, // 0：男， 1： 女
						age: 25,
						isguanzhu: false,
						title: '我是视频主标题',
						titlepic: '../../static/demo/datapic/13.jpg',
						video: {
							lonkNum: 2212,
							long: '2:22'
						},
						share: false,
						path: '深圳 龙岗',
						commetNum: 22,
						shareNum: 99,
						zanNum: 33
					},
					// 分享列表
					{
						userpic: '../../static/demo/userpic/12.jpg',
						username: '昵称',
						sex: 1, // 0：男， 1： 女
						age: 20,
						isguanzhu: false,
						title: '我是分享主标题',
						titlepic: '',
						video: false,
						share: {
							shareTile: '分享内容标题',
							shareTitlePic: '../../static/demo/datapic/19.jpg'
						},
						path: '深圳 龙岗',
						commetNum: 22,
						shareNum: 99,
						zanNum: 33
					}
				]
				this.tabList[this.tabIndex].list = arr
				setTimeout(() => {
					uni.stopPullDownRefresh()
				}, 1500)
			},
			// 上垃加载
			loadMore(index) {
				if(this.tabList[index].loadMoreText!="上拉加载更多"){ return; }
				// 修改状态
				this.tabList[index].loadMoreText="加载中...";
				// 获取数据
				setTimeout(()=> {
					//获取完成
					let obj={
							userpic: '../../static/demo/userpic/12.jpg',
							username: '昵称',
							sex: 0, // 0：男， 1： 女
							age: 25,
							isguanzhu: false,
							title: '我是主标题',
							titlepic: '../../static/demo/datapic/13.jpg',
							video: false,
							share: false,
							path: '深圳 龙岗',
							commetNum: 22,
							shareNum: 99,
							zanNum: 33
						};
					this.tabList[index].list.push(obj);
					this.tabList[index].loadMoreText="上拉加载更多";
				}, 1000);
			}
		}
	}
</script>

